<template>
  <div>

	<myheader></myheader>


	<br><br>

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
		
			<div>
			用户名 : <input type="text" v-model="username">
			</div>

			<br><br>

			<div>
				密码 : <input type="password" v-model="password">
			</div>

			<br><br>
			<!-- 滑块验证码 -->
			<center>
			<div>
				<drag-Verify
				:width="width"
				:height="height"
				:text="text"
				ref="Verify"
				>
				</drag-Verify>
			</div>
			</center>
			<br><br>
			<Button @click="submit">登录</Button>&nbsp;&nbsp;<Button @click="reset" color="green">重置</Button>
			<br><br>
			<img :src="sina_imgsrc" @click="sina" style="cursor:pointer">
			<img :src="ding_imgsrc" @click="dingding" style="cursor:pointer">
		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';
//导入滑块验证码
import dragVerify from 'vue-drag-verify';
import { config } from "../config";

export default {
  data () {
    return {
	  //面包屑导航
	  datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
	  msg: "这是一个变量",
	  username:'',
	  password:'',
	  //滑块验证码
	  text:'请将滑块拖动到最右侧',
	  width:300,
	  height:40,
	  sina_imgsrc:config['sina_imgsrc'],
	  ding_imgsrc:config['ding_imgsrc'],


    }
  },
  //定义组件
  components:{
	'myheader':myheader,
	'myfooter':myfooter,
	'dragVerify':dragVerify,
  },
  mounted:function(){

   
  
},
  methods:{
	//钉钉登录
	dingding(){
		var appid = 'dingoaukgkwqknzjvamdqh';
    	var redirect_uri = 'http://localhost:8000/dingding_back/';

		var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
		//跳转
		window.location.href = url;
		},
	//新浪微博登录
	sina(){
	let url = "https://api.weibo.com/oauth2/authorize?client_id=4048655952&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";
	//跳转
	window.location.href = url;
	  },
      //重置
  	reset:function(){

  		this.username = '';
  		this.password = '';
	},
	//提交事件
	submit:function(){
		
		console.log(this.$refs.Verify.isPassing);

		//判断
		if(this.username == ''){

			//alert('用户名不能为空');
			this.$Message('用户名不能为空');
			return false;
		}

		if(this.password == ''){

		alert('密码不能为空');
		return false;
		}
		//判断是否拖动滑块
		if (this.$refs.Verify.isPassing==false){
			this.$Message('请拖动滑块完成验证')
			return false
		}


		//请求后台接口
		this.axios.get('http://localhost:8000/login/',{params:{username:this.username,password:this.password}}).then((result) =>{

			console.log(result);
			alert(result.data.message);
			if(result.data.code==200){
				//将用户名和uid存到localstorge
				localStorage.setItem("username",result.data.username);
				localStorage.setItem("uid",result.data.uid);
				localStorage.setItem("jwt",result.data.jwt);
				//跳转
				this.$router.push("/");
			}
		});


	}
     
  }
}


</script>
 
<style>



</style>